// 主题颜色
$primary-color: #4080ff;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #ff4d4f;

// 文字颜色
$text-primary: #333333;
$text-secondary: #666666;
$text-tertiary: #999999;

// 背景颜色
$bg-primary: #ffffff;
$bg-secondary: #f5f7fa;

// 边框颜色
$border-color: #f0f0f0;

// 阴影
$box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
$card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

// 圆角
$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 16px;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 24px;

// 字体大小
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-size-xl: 24px;

// 共享样式
.page-container {
  min-height: 100vh;
  background-color: $bg-secondary;
}

.header {
  padding: $spacing-lg;
  background-color: $primary-color;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .title {
    font-size: $font-size-lg;
    font-weight: 600;
    color: $bg-primary;
  }
}

.card {
  background-color: $bg-primary;
  border-radius: $border-radius-md;
  padding: $spacing-lg;
  margin-bottom: $spacing-md;
  box-shadow: $box-shadow;
}

.primary-button {
  background-color: $primary-color;
  color: $bg-primary;
  font-size: $font-size-md;
  padding: $spacing-md $spacing-xl;
  border-radius: $border-radius-lg;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  
  &:active {
    opacity: 0.8;
  }
}

.text-button {
  color: $primary-color;
  font-size: $font-size-sm;
  background: none;
  border: none;
  padding: $spacing-xs $spacing-sm;
}

.status-tag {
  font-size: $font-size-sm;
  padding: 2px $spacing-sm;
  border-radius: $border-radius-sm;
  
  &.success {
    color: $success-color;
    background-color: rgba($success-color, 0.1);
  }
  
  &.warning {
    color: $warning-color;
    background-color: rgba($warning-color, 0.1);
  }
  
  &.primary {
    color: $primary-color;
    background-color: rgba($primary-color, 0.1);
  }
}

.divider {
  height: 1px;
  background-color: $border-color;
  margin: $spacing-md 0;
}

.list-item {
  display: flex;
  align-items: center;
  padding: $spacing-lg;
  background-color: $bg-primary;
  border-bottom: 1px solid $border-color;
  
  &:last-child {
    border-bottom: none;
  }
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} 